<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Sortable list example</title>
   <script src="mootools1.2.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="sortable.css" />
  </head>
  
  <body>
   <div id="page">
<h1>Sortable list example</h1>
<div class="result"> <b>list:</b> <span id="result"></span></div>
<div class="sortable" id="sortable">
<div id="item_1" class="item"><span class="handle">handle</span><span class="itemContent">item 1</span></div>

<div id="item_2" class="item"><span class="handle">handle</span><span class="itemContent">item 2</span></div>
<div id="item_3" class="item"><span class="handle">handle</span><span class="itemContent">item 3</span></div>
<div id="item_4" class="item"><span class="handle">handle</span><span class="itemContent">item 4</span></div>
<div id="item_5" class="item"><span class="handle">handle</span><span class="itemContent">item 5</span></div>
<div id="item_6" class="item"><span class="handle">handle</span><span class="itemContent">item 6</span></div>
<div id="item_7" class="item"><span class="handle">handle</span><span class="itemContent">item 7</span></div>

<div id="item_8" class="item"><span class="handle">handle</span><span class="itemContent">item 8</span></div>
<div id="item_9" class="item"><span class="handle">handle</span><span class="itemContent">item 9</span></div>
<div id="item_10" class="item"><span class="handle">handle</span><span class="itemContent">item 10</span></div>
</div>

</div>
<script type="text/javascript">  

 var sort = new Sortables($('sortable'), {
	handles : $$('.handle'),		
	ghost: true,
	snap: 3,
	onDragStart: function(element, ghost){
		var w = element.getCoordinates();
		console.log(w.width);
		element.setStyle('opacity', 0.1);
		ghost.setStyles({
		opacity: 0.8,
		width: w.width,
		});
	},
	onDragComplete: function(element, ghost){
		ghost.remove();
		element.setStyle('opacity', 1.0);
	},
	onComplete : function(item){
		$('result').setHTML(
		sort.serialize(function(element, index){
			return element.getProperty('id') + '=' + index;
		}).join(' & ')
		);
	}.bind(sort)
});
</script>
  </body>
</html>
